<template>
	<view>
		<block v-if="!boxHide">
			<view class="bar_top">
				<view class="search">
					<view class="search_input">
						<image src="/static/images/search.png" mode=""></image>
						<input type="text" v-model="search" placeholder="请输入关键词" />
					</view>
					<view class="search_btn" @tap="getData(1)">搜索</view>
				</view>

				<view class="finance_bar">
					<view>查询范围：</view>
					<picker mode="selector" :range="userList" @change="getPickerValue" :range-key="'username'" :data-index="'userIndex'">
						<view class="finance_bar_picker">
							<view>{{userList[userIndex].username}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<picker mode="selector" :range="classList" @change="getPickerValue" :data-index="'classIndex'">
						<view class="finance_bar_picker">
							<view>{{classList[classIndex]}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
				</view>

				<view class="finance_bar">
					<view>查询时间：</view>
					<picker mode="date" fields="day" @change="getPickerValue" :data-index="'start'">
						<view class="finance_bar_picker">
							<view>{{start == null ? "请选择时间" : start}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
					<picker mode="date" fields="day" @change="getPickerValue" :data-index="'end'">
						<view class="finance_bar_picker">
							<view>{{end}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>
				</view>
			</view>

			<view class="info_list">
				<block v-for="(item,index) in list" :key="index">
					<view class="order_item_time">{{item.more_at_day}}天{{item.more_at_hours}}时{{item.more_at_minute}}分前</view>
					<view class="order_item">
						<view class="order_item_title">
							<view class="order_item_title_text">
								<view>{{item.customer_country}}{{item.customer_address}}</view>
								<view>{{item.customer_name}}/{{item.customer_title}}</view>
							</view>
						</view>

						<block v-for="(items,indexs) in item.product_list">
							<view class="order_item_num" :key="index">
								<view>{{items.product_name}}</view>
								<view>数量{{items.number}}</view>
							</view>
						</block>

						<view class="order_item_content">
							<image src="/static/images/order_type3.png" class="order_item_content_logo" v-if="item.type == '已经完成'"></image>
							<view class="font_item">
								<view>收货地址</view>
								<view>{{item.customer_address}}</view>
							</view>
							<view class="font_item">
								<view>订单编号</view>
								<view>{{item.order_no}}</view>
							</view>
							<view class="font_item">
								<view>开单日期</view>
								<view>{{item.create_at}}</view>
							</view>
							<view class="font_item">
								<view>成交日期</view>
								<view>{{item.close_at?item.close_at:'暂无'}}</view>
							</view>
							<view class="font_item">
								<view>收款期限</view>
								<view>{{item.sk_date}}</view>
							</view>
							<view class="font_item">
								<view>交货期限</view>
								<view> <text v-if="item.is_ship==0">{{item.jh_date}}</text> <text v-if="item.is_ship==1">暂无</text></view>
							</view>
							<view class="font_item">
								<view>订单进度</view>
								<view class="schedule" style="color: #007AFF;">
									<picker mode="selector" :range="order_schedule" @change="changeProgress" class="add_icon_picker" :data-index="index">
										{{item.schedule ? item.schedule : '请选择'}}
									</picker>
								</view>
							</view>
							<view class="font_item">
								<view>审核工单</view>
								<view>{{item.fh_desc?item.fh_desc:'暂无'}}</view>
							</view>
						</view>

						<view class="order_item_btn" @tap="navGo(item)">
							<text>开出库单</text>
						</view>
					</view>
				</block>
			</view>
		</block>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boxHide: true,
				list: [],
				userList: [],
				userIndex: 0,
				classList: [],
				classIndex: 0,
				page: 1,
				start: null,
				end: "",
				search: "",
				loading: true,
				order_schedule: []
			}
		},
		onLoad() {
			this.end = this.$api.getNowTime();
			this.getData(0);
			this.$api.getUserList({}).then(res => {
				let list = [];
				list.push({
					id: -1,
					mobile: "13352554635",
					username: "全公司"
				})
				for (let i in res) {
					for (let j in res[i].user_list) {
						list.push(res[i].user_list[j])
					}
				}
				this.userList = list;
			})
			this.$api.getProductClass({}).then(res => {
				res.unshift("全部")
				this.classList = res
			})
			this.$api.getOrderSchedule().then(res => {
				this.order_schedule = res;
			})
		},
		onReachBottom() {
			if (this.loading) {
				this.getData(3)
			}
		},
		methods: {
			getData(type) { //获取数据
				this.$refs.load.initLoading({
					loadType: type
				}).then(res => {
					if (type == 1) {
						this.page = 1;
						this.list = []
					}
					let upJson = {
						page: this.page,
						search: this.search
					}
					if (this.userIndex > 0) upJson.user_id = this.userList[this.userIndex].id;
					if (this.classIndex > 0) upJson.class = this.classList[this.classIndex];
					if (this.start != null) upJson.start = this.start, upJson.end = this.end;
					this.$api.getProductOut(upJson).then(res => {
						this.boxHide = false;
						this.$refs.load.getLoadingData({
							oldData: this.list,
							newData: res.data
						}).then(res => {
							this.loading = res.loading;
							this.list = res.list;
							this.page++
						});
					})
				});
			},
			getPickerValue(e) {
				this[e.currentTarget.dataset.index] = e.detail.value;
				this.getData(1);
			},
			//更改进度
			changeProgress(e){
				let itemIndex = e.currentTarget.dataset.index;
				let index = Number(e.detail.value)
				let schedule = this.order_schedule[index];
				let upJSon = {
					id: this.list[itemIndex].id,
					schedule: schedule
				}
				this.$api.editSchedule(upJSon).then(res => {
					this.list[itemIndex].schedule = schedule;
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})
				})
			},
			navGo(item) {
				uni.navigateTo({
					url: '/pages/product/out/out?order_id=' + item.id
				})
			},
		}
	}
</script>

<style>
	.info_list {
		margin-top: 240upx;
	}

	.finance_bar {
		width: 100%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #9BA7B7;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.finance_bar_picker {
		margin-right: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #333333;
	}

	.finance_bar_picker image {
		width: 22upx;
		height: 10upx;
		margin-left: 10upx;
	}

	.finance_bar_btn {
		margin-left: auto;
		color: #333333;
	}
</style>
